import { useEffect, useState } from "react"
import { Button, Image, Space, Table } from 'antd'
import { WhatsAppOutlined } from '@ant-design/icons'
import { getUserList } from "../../api/admin"

type UserListProps = {}
export const UserList = (props:UserListProps)=>{
    const [userList, setUserList] = useState<any[]>([]) //用户列表
    const [current, setCurrent] = useState(1) // 页码
    const [pageSize, setPageSize] = useState(5) // 每页显示个数

    const getList = async ()=>{
        let res = await getUserList()
        console.log(res.data.data)
        setUserList(res.data.data)
    }

    useEffect(()=>{
        getList()
    },[])


    return (
        <>
           <Space direction='vertical' style={{ width: '100%' }}>
                <Table
                dataSource={userList}
                rowKey="userid"
                scroll={{ y: document.body.offsetHeight - 330 }}
                bordered
                pagination={{
                    current,
                    pageSize,
                    onChange(page, pageSize) {
                    setCurrent(page)
                    setPageSize(pageSize)
                    }
                }}
                >
                <Table.Column
                    title="序号"
                    render={(text, record, index) => { return <span>{(current - 1) * pageSize + index + 1}</span> }}
                ></Table.Column>
                <Table.Column
                    title="头像"
                    dataIndex="avatar"
                    render={(text) => {
                    return <Image src={text} height={75} alt="暂无头像" />
                    }}
                ></Table.Column>
                <Table.Column
                    title="昵称"
                    dataIndex="nickname"
                    render={(text) => { return text ? text : '匿名用户' }}
                ></Table.Column>
                <Table.Column
                    title="电话"
                    dataIndex="tel"
                ></Table.Column>
                <Table.Column
                    title="创建时间"
                    dataIndex="createTime"
                    render={(text): any => { return new Date(parseInt(text)).toLocaleDateString() }}
                ></Table.Column>
                <Table.Column
                    title="操作"
                    render={(text, record: any, index) => {
                    return (
                        <Space>
                        <Button danger shape="circle" icon={<WhatsAppOutlined />} />
                        </Space>
                    )
                    }}
                ></Table.Column>
                </Table>
            </Space>
        </>
    )
}